<template>
    <div>
      <el-tabs v-model="activeTab">



        <el-tab-pane :label="`未读消息(${unread.length})`" name="first">


          <el-table :data="unread" :show-header="showHeader" :row-style="{'background': '#f5f5f5'}">
            <el-table-column prop="date" label="日期" width="200">

              <!-- 插槽 -->
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 5px">{{scope.row.date}}</span>
              </template>

            </el-table-column>
            <el-table-column prop="title" label="消息内容"   fit='true'>
              <template slot-scope="scope">
               
                <span style="margin-left: 5px;color:red">{{scope.row.title}}</span>
              </template>

            </el-table-column>
            <el-table-column prop="type" label="类型">
              <template slot-scope="scope">
               
                <span  v-if="scope.row.type==1" >公告</span>
                <span  v-if="scope.row.type==2" >消息</span>
                <span  v-if="scope.row.type==3" >新闻</span>
              </template>

            </el-table-column>
            <el-table-column width="120" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="handleRead(scope.$index)" type="warning">标为已读</el-button>
              </template>
            </el-table-column>
          </el-table>




          <el-button @click="handleReadAll" type="danger" class="btn-batch">全部标记为已读</el-button>
        </el-tab-pane>
        <el-tab-pane :label="`已读消息(${read.length})`" name="second">
          <el-table :data="read" :show-header="showHeader" :row-style="{'background': '#f5f5f5'}">
            <el-table-column prop="date" label="日期" width="200">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 5px">{{scope.row.date}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="消息内容">
            </el-table-column>
            <el-table-column width="100" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="handleDel(scope.$index)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="handleDelAll" type="danger" class="btn-batch">删除全部</el-button>
        </el-tab-pane>
        <el-tab-pane :label="`回收站(${trash.length})`" name="third">
          <el-table :data="trash" :show-header="showHeader" :row-style="{'background': '#f5f5f5'}">
            <el-table-column prop="date" label="日期" width="200">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 5px">{{scope.row.date}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="消息内容">
            </el-table-column>
            <el-table-column width="100" label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="handleRestore(scope.$index)" type="default">还原</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="handleRestoreAll" class="btn-batch" type="warning">恢复全部</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
    export default {
      name: "Tab",
      data() {
        return {
          activeTab: 'first',
          showHeader: true,
          unread: [{
              date: '2018-08-20 20:00:00',
              title: '【系统通知】该系统将于次日凌晨2点到5点进行升级维护',
              type:1
            },
            {
              date: '2018-08-19 21:00:00',
              title: '【天气预报】明日成都全市范围内会有大面积降雨',
              type:2
            },
            {
              date: '2018-08-19 20:00:00',
              title: '【系统通知】该系统将于次日凌晨2点到5点进行升级维护',
              type:3
            }
          ],
          read: [{
            date: '2018-08-17 20:00:00',
            title: '【系统通知】该系统将于次日凌晨2点到5点进行升级维护'
          }],
          trash: [{
            date: '2018-08-17 21:00:00',
            title: '【天气预报】明日成都龙泉驿区将会出现罕见高温'
          }]
        };
      },
      methods: {
        handleRead(index) {
  
          this.read.push(this.unread.splice(index, 1)[0]);
        },
        handleReadAll() {
  
          this.read = this.read.concat(this.unread.splice(0));
        },
        handleDel(index) {
  
          this.trash.push(this.read.splice(index, 1)[0]);
        },
        handleDelAll() {
  
          this.trash = this.trash.concat(this.read.splice(0));
        },
        handleRestore(index) {
  
          this.read.push(this.trash.splice(index, 1)[0]);
        },
        handleRestoreAll() {
  
          this.read = this.read.concat(this.trash.splice(0));
        }
      }
    }
  </script>
  
  <style scoped lang="less">
    .el-tab-pane {
      padding: 20px 0;
      // .border-radius;
    }
  
    .btn-batch {
      margin: 20px 0 0 10px;
    }
  </style>
  